<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实地考察</title>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h1>测评得分</h1>
<div id="info">
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="考试单位">
                <el-input v-model="searchForm.name" placeholder="考试单位"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="search" @click="loadingData">查询</el-button>
                <el-button type="success" icon="el-icon-back" @click="back">返回</el-button>
                <el-button type="success"  icon="el-icon-share" @click="daoChu">导出数据</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <el-table
            ref="multipleTable"
            :data="tableData"
            border
            height="530px"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection">
        </el-table-column>
        <el-table-column
                align="center"
                label="序号"
                type="index"
                width="100px"
        >
        </el-table-column>
        <el-table-column
                prop="SHtime"
                label="时间">
        </el-table-column>
        <el-table-column
                prop="name"
                label="测评单位">
        </el-table-column>
        <el-table-column
                prop="kscore"
                label="得分">
        </el-table-column>

    </el-table>
    <div style="margin-top: 20px">
        <el-col :span="24" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </div>
</div>
</body>
<script>
    var vm=new Vue({
        el:"#info",
        data:{
            //声明变量存放查出来的数据
            tableData:[],
            //分页大小
            pageSize:5,
            //当前页数
            currentPage:1,
            //总条数
            total:10,
            //多选值
            multipleSelection: [],
            //搜索栏
            searchForm: {
                name:"",
            }
        },
        created:function(){
            //加载数据表格
            this.loadingData();
        },
        methods: {
            //加载数据表格
            loadingData:function() {
                var self = this;
                //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
                var start =(this.currentPage-1)*this.pageSize;
                axios.post('/ceping/select',{'start':start,'pageSize':this.pageSize,'name':this.searchForm.name}).then(function (response) {
                    self.tableData = response.data.data;
                    self.total=response.data.total;
                });
            },
            //存储选中的值
            handleSelectionChange:function(val){
                this.multipleSelection=val;
            },
            //返回
            back:function(){
                location.href="/zhishi/html";
            },
            //导出
            daoChu:function(){
                var selectChange=this.multipleSelection;
                if(selectChange.length>0){
                    axios.post("../ceping/data",{"xinxi":selectChange}).then(function(response){
                        if(response.data==1){
                            location.href="../ceping/export"
                        }
                    });
                }else{
                    this.$message({
                        message:'请至少选中一个',
                        type:'error'
                    });
                }
            }
        }
    });
</script>
</html>